<template>
    <div>
        <div class="title">展示形式:</div>
        <div>
            <el-select v-model="tempValue.flex" placeholder="请选择">
                <el-option
                        v-for="item in flexData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title">是否有上边距:</div>
        <div>
            <el-select v-model="tempValue.marginFlag" placeholder="请选择">
                <el-option
                        v-for="item in marginData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
            <div class="title">选中的商品</div>
            <div v-for="(item,i) in tempValue.goodsList" :key="i" class="goodsBox">
                <div>
                    <div class="imgBox">
                        <img :src="item.goodsMainPhotoUrl" width="40px" height="40px"/>
                    </div>
                    <div class="goodsName">{{item.goodsName}}</div>
                    <div class="btn"><el-button type="text" @click="delSel(item.id)">删除</el-button></div>
                </div>
            </div>
        <div class="btnChange">
            <el-button type="primary" @click="openGoods">
                选择商品
            </el-button>
        </div>
        <!--        弹框-->
        <goodsPlaOrSel
                v-if="isDisplay"
                ref="goodsPlaOrSel"
                :ptOrMg="ptOrMg"
                @func="handleClose"
                @changeGoods="changeSel"></goodsPlaOrSel>
    </div>
</template>
<script>
    import goodsPlaOrSel from '../../components/goods-PlaOrSel/goods-PlaOrSel'
    import {mapState, mapGetters} from 'vuex'
    export default {
        name: "qkGoodsAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        goodsList:[],
                        flex:'7',
                        marginFlag:'true',
                    }
                }
            }
        },
        components: {
            goodsPlaOrSel
        },
        data() {
            return {
                tempValue: {},
                //    弹框受否显示
                isDisplay:false,
                ptOrMg:'pt',
                flexData:[
                    {
                        value: '1',
                        label: '单列带划线价'
                    }, {
                        value: '2',
                        label: '两列带划线价'
                    }, {
                        value: '3',
                        label: '折扣活动 -单列-立即抢购'
                    }, {
                        value: '4',
                        label: '秒杀活动-单列'
                    }, {
                        value: '5',
                        label: '拼团活动'
                    },{
                        value: '6',
                        label: '两列 单价格'
                    },{
                        value: '7',
                        label: '三列 单价格'
                    }
                ],
                marginData:[{
                    value: 'true',
                    label: '是'
                },{
                    value: 'false',
                    label: '否'
                }]
            }
        },
        methods:{
            //delSel
            //删除选中的商品
            delSel(id){
                this.tempValue.goodsList.splice(this.tempValue.goodsList.findIndex(i=>i==id),1)
            },
            handleClose() {
                this.isDisplay = false;
            },
            //打开弹框
            openGoods(){
                this.isDisplay=true
                this.$nextTick(() => {
                    this.$refs.goodsPlaOrSel.handleToggleIsShow(true);
                })
            },
            //    选中的商品
            changeSel(val){
                this.tempValue.goodsList=val
                this.$store.commit("setQKGoodList",val);
            }
        },
        mounted() {
            this.tempValue = this.prop;
        },
        watch: {
            tempValue(e) {
                this.$store.commit("updateActiveElementProp",e);
            },

        }
    }
</script>

<style lang="scss" scoped>
    .arrt-eidt-wrapper{
        display: flex;
        .arrt-eidt-l{
            width: 108px;
        }
        .arrt-eidt-r{
            flex: 1;
        }
    }
    .title{
        vertical-align: middle;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .btnChange{
        width: 100%;
        .el-button{
            display: block;
            margin: 0px auto;
        }
    }
    .goodsBox{
        width: 100%;
        height: 40px;
        margin: 10px 0px;
        .imgBox{
            width: 20%;
            height: 40px;
            display: inline-block;
        }
        .goodsName{
            display: inline-block;
            width: 60%;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            margin: 0px 5px;
        }
        .btn{
            width: 10%;
            display: inline-block;
        }

    }

</style>







